<!--
 * @Description:
 * @Author: 月间
 * @Date: 2025-03-31 22:52:33
 * @LastEditTime: 2025-04-01 00:22:18
 * @LastEditors:
-->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { fetchGetConsumerOptions, fetchGetConsumerStatistics } from '@/service/api';
import { useEcharts } from '@/hooks/common/echarts';
// 最近60秒消费情况
const { domRef: recentSixSecondsRef, updateOptions: recentSixSecondsOption } = useEcharts(() => ({}));
// 最近60分钟消费情况
const { domRef: recentSixMinutesRef, updateOptions: recentSixMinutesOption } = useEcharts(() => ({}));
// 最近24小时消费情况
const { domRef: recentOneDayRef, updateOptions: recentOneDayOption } = useEcharts(() => ({}));
// 最近10天消费情况
const { domRef, updateOptions } = useEcharts(() => ({}));

interface Option<T> {
  label: string;
  value: T;
}
const options = ref<Option<string>[]>([]);

async function getTaskName() {
  const { error, data } = await fetchGetConsumerOptions();
  if (error) return;
  options.value = data as Option<string>[];
}
onMounted(() => {
  getTaskName();
  getBarStatistics();
});
const queueName = ref(null);
async function getBarStatistics() {
  const { data } = await fetchGetConsumerStatistics(queueName.value, 'recent_60_seconds');
  if (data) {
    recentSixSecondsOption(opts => {
      opts = data;
      return opts;
    });
  }
  const { data: data1 } = await fetchGetConsumerStatistics(queueName.value, 'recent_60_minutes');
  if (data1) {
    recentSixMinutesOption(opts => {
      opts = data1;
      return opts;
    });
  }
  const { data: data2 } = await fetchGetConsumerStatistics(queueName.value, 'recent_24_hours');
  if (data2) {
    recentOneDayOption(opts => {
      opts = data2;
      return opts;
    });
  }
  const { data: data3 } = await fetchGetConsumerStatistics(queueName.value, 'recent_10_days');
  if (data3) {
    updateOptions(opts => {
      opts = data3;
      return opts;
    });
  }
}
</script>

<template>
  <div>
    <!-- 队列下拉框 -->
    <NSpace vertical :size="16">
      <NSpace :size="16">
        <NSelect v-model:value="queueName" :options="options" class="w-200px" size="medium" />
        <NButton type="primary" size="medium" @click="getBarStatistics">查询</NButton>
      </NSpace>
    </NSpace>
    <NSpace vertical :size="16">
      <NGrid cols="s:1 m:2 l:2" responsive="screen" :x-gap="16" :y-gap="16">
        <NGi>
          <NCard>
            <template #header>
              <NSpace>
                <SvgIcon icon="flat-color-icons:pie-chart" class="text-30px" />
                <span>最近60秒消费情况</span>
              </NSpace>
            </template>
            <div ref="recentSixSecondsRef" class="h-360px overflow-hidden"></div>
          </NCard>
        </NGi>
        <NGi>
          <NCard>
            <template #header>
              <NSpace>
                <SvgIcon icon="line-md:gauge-twotone-loop" class="text-30px" />
                <span>最近60分钟消费情况</span>
              </NSpace>
            </template>
            <div ref="recentSixMinutesRef" class="h-360px overflow-hidden"></div>
          </NCard>
        </NGi>
      </NGrid>
      <NGrid cols="s:1 m:2 l:2" responsive="screen" :x-gap="16" :y-gap="16">
        <NGi>
          <NCard>
            <template #header>
              <NSpace>
                <SvgIcon icon="flat-color-icons:pie-chart" class="text-30px" />
                <span>最近24小时消费情况</span>
              </NSpace>
            </template>
            <div ref="recentOneDayRef" class="h-360px overflow-hidden"></div>
          </NCard>
        </NGi>
        <NGi>
          <NCard>
            <template #header>
              <NSpace>
                <SvgIcon icon="line-md:gauge-twotone-loop" class="text-30px" />
                <span>最近10天消费情况</span>
              </NSpace>
            </template>
            <div ref="domRef" class="h-360px overflow-hidden"></div>
          </NCard>
        </NGi>
      </NGrid>
    </NSpace>
  </div>
</template>

<style scoped></style>
